<script setup>
const props = defineProps({
  title: String,
  editShow: Boolean,
})
</script>

<template>
  <div class="w-[1000px] bg-[var(--theme)] mt-[24px] border border-solid border-[var(--grid)] rounded-[4px] s2k:w-[1333px] s4k:w-[2000px] s2k:mt-[32px] s4k:mt-[48px] s2k:rounded-[6px] s4k:rounded-[8px]">
    <div class="p-[32px] s2k:p-[42.6px] s4k:p-[64px]">
      <div class="text-[1.25rem] text-[#9CA3AF] font-Medium font-[500] flex flex-row justify-between items-center">
        <div>{{ title }}</div>
        <svg-icon v-show="editShow" name="edit" class="svgEdit cursor-pointer s2ksvg s4ksvg" width="20px" height="20px"></svg-icon>
      </div>
      <div class="w-full h-[1px] bg-[var(--grid)] mt-[12px] mb-[24px] s2k:mt-[16px] s4k:mt-[24px] s2k:mb-[32px] s4k:mb-[48px]"></div>
      <div class="modal-body">
        <slot name="body">default body</slot>
      </div>
    </div>  
  </div>
</template>

<style scoped lang="scss">
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.3) !important;
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(2) !important;
  }
}
</style>